<template>
  <div
    v-loading="numberPartModel.loading"
    class="v-numberPart-container"
  >
    <div class="table-container">
      <el-table
        ref="tableRef"
        :data="numberPartModel.tableData.filter(ta => ta.status !== NumberStatus.DELETE)"
        :style="{ width: '100%' }"
        height="100%"
        :indent="0"
        :empty-text="$t('暂无数据')"
        :element-loading-text="$t('加载中') + '...'"
        border
        highlight-current-row
        @row-click="handelClickRow"
      >
        <el-table-column :label="$t('名称')">
          <template #default="{ row, $index }: { row: NumberPartInfo, $index: number }">
            <el-input
              v-model="row.name"
              maxlength="100"
              :placeholder="$t('请输入名称')"
              @change="val => numberPartModel.changeName(val, $index)"
            />
          </template>
        </el-table-column>

        <el-table-column :label="$t('编号类型')">
          <template #default="{ row, $index }: { row: NumberPartInfo, $index: number }">
            <el-select
              v-model="row.sequenceType"
              :placeholder="$t('请选择')"
              class="form-item"
              :suffix-icon="SelectSuffix"
              @change="val => numberPartModel.handleChangeSequenceType(val, $index)"
            >
              <el-option
                v-for="item in numberPartModel.sequenceTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>

        <el-table-column :label="$t('初始值')">
          <template #default="{ row, $index }: { row: NumberPartInfo, $index: number }">
            <el-input
              v-model="row.initialValue"
              maxlength="100"
              @change="val => numberPartModel.changeValue(val, $index)"
            />
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('操作')"
          width="45"
        >
          <template #default="{ row }: { row: NumberPartInfo, $index: number }">
            <img
              style="margin-left: 12px"
              src="statics/icons/app/iconmore.png"
              class="g-pointer"
              @click="numberPartModel.navToPropertyPane(row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot-area">
      <el-button
        :disabled="isModelDisabled || !currentKey || numberPartModel.currentIndex === 0"
        @click="moveUp"
      >
        <template #icon>
          <img
            src="/statics/icons/app/iconMoveup.svg"
            alt=""
          />
        </template>
        {{ $t("上移") }}
      </el-button>
      <el-button
        :disabled="isModelDisabled || !currentKey || numberPartModel.currentIndex === numberPartModel.tableData.length - 1"
        @click="moveDown"
      >
        <template #icon>
          <img
            src="/statics/icons/app/iconMovedown.svg"
            alt=""
          />
        </template>
        {{ $t("下移") }}
      </el-button>
      <el-button
        :disabled="isModelDisabled"
        @click="addNewRow()"
      >
        <template #icon>
          <img
            src="/statics/icons/app/iconadd.svg"
            alt=""
          />
        </template>
        {{ $t("新建") }}
      </el-button>
      <el-button
        :disabled="isModelDisabled || !currentKey"
        @click="cloneRow()"
      >
        <template #icon>
          <img
            src="/statics/icons/app/iconclone.svg"
            alt=""
          />
        </template>
        {{ $t("克隆") }}
      </el-button>
      <el-button
        :disabled="isModelDisabled || !currentKey"
        @click="deleteRow()"
      >
        <template #icon>
          <img
            src="/statics/icons/app/icondelete2.svg"
            alt=""
          />
        </template>
        {{ $t("删除") }}
      </el-button>
      <el-button @click="saveNumberRule()">
        <template #icon>
          <img
            src="/statics/icons/table/iconinsert.svg"
            alt=""
          />
        </template>
        {{ $t("保存") }}
      </el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch, nextTick } from "vue";
import SelectSuffix from "@/modules/model/comps/common/SelectSuffix.vue";
import { debounce } from "lodash";
import { NumberPartInfo } from "@/modules/model/comps/station/sider/attribute/types";
import { ElTable } from "element-plus";
import { NumberStatus } from "@/constants/Enums";

const attributeTabsModel = computed(() => app.activeProject!.attributeTabsModel);
const currentKey = ref<string | undefined>();
const tableRef = ref<InstanceType<typeof ElTable>>();

const numberPartModel = computed(() => attributeTabsModel.value.numberPartModel);
watch(
  () => attributeTabsModel.value.numberPartModel.currentIndex,
  () => {
    nextTick(() => {
      if (tableRef.value) {
        tableRef.value.setCurrentRow(numberPartModel.value.tableData[numberPartModel.value.currentIndex]);
      }
    });
  }
);

const isModelDisabled = computed(() => false);

function handelClickRow(row: NumberPartInfo) {
  currentKey.value = row.id;
  numberPartModel.value.handleRowClick(row);
}

async function addNewRow() {
  const uuid = await numberPartModel.value.addNewRow();
  currentKey.value = uuid;
}

async function cloneRow() {
  const uuid = await numberPartModel.value.cloneRow();
  currentKey.value = uuid;
}

async function deleteRow() {
  await numberPartModel.value.deleteRow();
  currentKey.value = undefined;
}

function saveNumberRule() {
  numberPartModel.value.saveNumberRule();
}

const moveDown = debounce(() => {
  numberPartModel.value.moveRow("down");
}, 300);
const moveUp = debounce(() => {
  numberPartModel.value.moveRow("up");
}, 300);
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-numberPart-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .v-editor-NamedElement_name,
  .v-editor-select,
  .v-editor-input {
    width: 100%;
  }
  .table-container {
    flex: 1;
    overflow: hidden;

    .el-table--small .cell {
      padding: 0;
    }
    .merge-rows {
      background-color: #fff;
    }
    .el-table--border {
      &::after,
      &::before {
        width: 0;
      }
      .el-table__inner-wrapper {
        &::after,
        &::before {
          height: 0;
        }
      }
    }
    .el-table__column-resize-proxy {
      border-color: #b2bece;
      border-width: 2px;
    }
    .el-table__border-left-patch {
      width: 0;
    }
    .el-table__header {
      .el-table__cell {
        background: #e8eef9;
        padding: 2px 0;
        border-top: 1px solid #d0d0d0;
        border-color: #d0d0d0 !important;
        .cell {
          color: rgba(0, 0, 0, 0.85);
          font-weight: 500;
          padding: 0 6px !important;
        }
      }
    }
    .el-table__body {
      tr {
        .el-table__cell {
          &:first-of-type {
            border-left: 1px solid #d0d0d0;
          }
          &.first-column {
            .cell {
              justify-content: center;
            }
          }
          padding: 0;
        }
        &.el-table__row--level-0 {
          background: var(--md-color-sub3);
        }
      }
    }
    .cell {
      line-height: 24px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      .el-input__wrapper {
        box-shadow: none;
        background: transparent;
      }
      .el-select__wrapper {
        box-shadow: none;
        background: transparent;
      }
      .el-table__placeholder {
        display: none;
      }
      .cell-box {
        line-height: 24px;
        height: 24px;
        display: flex;
        width: 100%;
        align-items: center;
        > img {
          margin-right: 4px;
        }
        .el-checkbox {
          height: 24px;
        }
      }
      .el-table__expand-icon {
        vertical-align: middle;
        transform: none;
        margin-right: 4px;
        &::before {
          content: "";
          width: 12px;
          height: 12px;
          display: block;
          background: url("/statics/icons/app/iconadd.svg") no-repeat;
          background-size: cover;
        }
        &.el-table__expand-icon--expanded {
          &::before {
            background: url("/statics/icons/table/iconspread2.svg") no-repeat;
            background-size: cover;
          }
        }
        .el-icon {
          display: none;
        }
      }
      .text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        flex: 1;
      }
    }
    .el-table__empty-block {
      min-height: 24px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      &::before {
        content: "";
        width: 111px;
        height: 95px;
        background: url("/statics/icons/table/coworkfail.svg") no-repeat center;
        background-size: contain;
      }
      .el-table__empty-text {
        margin-top: 20px;
        line-height: 24px;
        width: 100%;
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .el-textarea__inner:focus {
      font-size: 12px;
      background: none;
      box-shadow: none;
    }
    .el-textarea__inner {
      height: 100%;
      background: none;
      box-shadow: none;
      // height: 24px;
      line-height: 30px;
      font-size: 12px;
      padding: 0 2px !important;
      border: none;
      overflow: auto;
      text-overflow: ellipsis;
    }
  }
  .foot-area {
    padding-top: 10px;
    button {
      height: 28px;
      border: 1px solid #d9d9d9;
      padding: 5px 10px;
      border-radius: 0;
      &:hover {
        border: 1px solid var(--md-primary-color);
      }
      img {
        margin-right: 5px;
      }
      & + .el-button {
        margin-left: 8px;
      }
    }
  }
}
</style>
